<template>
	<view>
		<!-- 背景墙 + 用户基本信息 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		<!-- 统计 -->
		<view class="user-space-data">
			<home-data :homedata="spacedata"></home-data>
		</view>
		<!-- 分割线 -->
		<view style="height: 20upx; background: #F4F4F4;"></view>
		<!-- tab导航 -->
		<swiper-tab-head 
		:tabBars="tabBars" 
		:tabIndex="tabIndex" 
		@tabtap="tabtap" 
		:scrollStyle="scrollStyle" 
		:scrollBlockStyle="scrollBlockStyle"></swiper-tab-head>
		
		<template v-if="tabIndex === 0">
			<!-- 主页 -->
			<user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
		</template>
		<block v-for="(item, index) in tabList" :key="index">
			<!-- 糗事 -->
			<template v-if="index !== 0 && (tabIndex === index)">
				<!-- 列表 -->
				<block v-for="(detail, detailIndex) in item.list" :key="detailIndex">
					<common-list :item="detail" :index="detailIndex"></common-list>
				</block>
				<!-- 上拉加载 -->
				<load-more :loadtext="item.loadtext"></load-more>
			</template>
		</block>
		
		<!-- 右上角菜单 -->
		<user-space-popup :show="show" @hide="hidePopup" @pullBlack="pullBlack" @remark="remark"></user-space-popup>
	</view>
</template>

<script>
	import userSpaceHead from '../../components/user-sapce/user-sapce-head.vue';
	import homeData from '../../components/home/home-data.vue';
	import swiperTabHead from '../../components/index/swiper-tab-head.vue';
	import userSpaceUserinfo from '../../components/user-sapce/user-space-userinfo.vue';
	import commonList from '../../components/common/common-list.vue';
	import loadMore from '../../components/common/load-more.vue';
	import userSpacePopup from '../../components/user-sapce/user-space-popup.vue';
	export default {
		components:{
			userSpaceHead,
			homeData,
			swiperTabHead,
			userSpaceUserinfo,
			commonList,
			loadMore,
			userSpacePopup
		},
		data() {
			return {
				userinfo:{
					sex: 0,
					nickname: '高渐离',
					age: 25,
					avatar: '../../static/images/avatar/nan2.jpg',
					bgpic: '1',
					isfollow: false,
					regtime: '2020-04-01',
					id: 12232,
					birthday: '1995-11-11',
					job: '法师',
					qg: '未婚',
					hometown: '召唤师峡谷',
				},
				spacedata: [
					{name: '获赞', num: 120},
					{name: '关注', num: 12},
					{name: '粉丝', num: 12}
				],
				tabBars:[
					{name: '主页',id: 'mine'}, 
					{name: '糗事', id: 'news'},
					{name: '动态', id: 'dynamic'}
				],
				tabIndex: 0,
				scrollStyle: 'border-bottom:0',
				scrollBlockStyle: 'width:33.33%',
				tabList:[
					{},
					{
						loadtext: '上拉加载更多',
						list:[
							// 文字
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 1, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 图文
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 视频
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: true,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: {
									looknum: '20W',
									time: '2:40'
								},
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 分享
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: {
									title: '分享标题',
									cover: '../../static/images/cbd.jpg'
								},
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list:[
							// 文字
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 1, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 图文
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 视频
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: true,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: {
									looknum: '20W',
									time: '2:40'
								},
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 分享
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: {
									title: '分享标题',
									cover: '../../static/images/cbd.jpg'
								},
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							}
						]
					}
				],
				show: false
			}
		},
		onLoad() {
			/* 动态修改标题 */
			this.changeTitle()
		},
		/* 上拉触发页面到底事件 */
		onReachBottom() {
			this.loadmore();
		},
		/* 监听导航按钮点击事件 */
		onNavigationBarButtonTap(e) {
			if(e.index === 0){
				this.show = !this.show;
			}
		},
		methods: {
			changeTitle(){
				uni.setNavigationBarTitle({
					title: this.userinfo.nickname + '的个人空间'
				});
			},
			tabtap(index){
				this.tabIndex = index
			},
			/* 上拉加载更多 */
			loadmore(){
				if(this.tabList[this.tabIndex].loadtext !== '上拉加载更多'){
					return;
				}
				// 修改加载状态
				this.tabList[this.tabIndex].loadtext = '加载中···';
				// 获取数据
				setTimeout(() => {
					var obj = {
						
					};
					// 获取完成
					this.tabList[this.tabIndex].loadtext = '上拉加载更多';
				}, 1000)
				
				
				// this.tabList[this.tabIndex].loadtext = '没有更多数据了';
			},
			/* 操作菜单 */
			hidePopup(){
				this.show = false;
			},
			showPopup(){
				this.show = true;
			},
			/* 拉黑 */
			pullBlack(){
				console.log('拉黑')
				this.hidePopup();
			},
			/* 备注 */
			remark(){
				console.log('备注')
				this.hidePopup();
			}
		}
	}
</script>

<style>
	.user-space-margin{
		margin: 15upx 0;
	}
	
	.user-space-data{
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		margin-top: -10upx;
	}
	
	
</style>
